<template>
  <div class="sender">
    <div class="profile-box">
      <div class="header">
        <div class="tab-list">
          <div :class="['tab', activeTab === 'Chat' ? 'active' : '']" @click="handleChangeTab('Chat')">
            <img class="svg-icon height_40px" src="@/assets/chat_sender.svg" alt="">
            <div>{{ $t('Chat Sender')}}</div>
          </div>
          <div :class="['tab', activeTab === 'Mail' ? 'active' : '']" @click="handleChangeTab('Mail')">
            <img class="svg-icon height_40px" src="@/assets/mail_sender.svg" alt="">
            <div>{{ $t('Mail Sender')}}</div>
          </div>
        </div>
      </div>
      <div class="header" style="border-radius: 0">
        <div class="checkbox-background" @click="handleCheckProfileAll">
          <div class="checkbox-cell">
            <img :src="isCheckedAll ? checkEdboxIcon : checkboxIcon" class="checkbox">
          </div>
        </div>
        <div class="search">
          <i class="el-icon-search" style="color: #628196;font-weight: bold"></i>
          <el-input :placeholder="$t('Search')" v-model="searchParams.inputValue"></el-input>
        </div>

        <el-dropdown @command="handleProfileCommand">
          <div class="icon-more" style="padding: 2px 5px;background-color: #2b4353;border-radius: 5px;color: #fff;margin-left: 5px;cursor:pointer;">
            <i class="el-icon-more"></i>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="on">{{ $t('Start sender') }}</el-dropdown-item>
            <el-dropdown-item command="off">{{ $t('Stop sender') }}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

      </div>
      <div class="profile-list">
        <div class="profile-item-wrapper"  v-for="item in profileShowList"
             :key="item.id">
          <div class="checkbox-background" @click="handleCheckProfile(item)">
            <div class="checkbox-cell">
              <img :src="item.checked ? checkEdboxIcon : checkboxIcon" class="checkbox">
            </div>
          </div>
          <div
              @click="handleCheckedProfile(item)"
              :class="['profile-item', item.id === checkedProfile.id ? 'active' : '']">
            <div class="profile-top">
              <div class="profile-item-avatar">
                <img class="photo" :src="item.photo" alt="">
                <div :class="['profile-status', item.online ? 'online' : 'offline']"></div>
              </div>
              <div class="profile-info">
                <div class="profile-item-name">{{item.name}}</div>
                <div class="profile-item-name">{{item.profile_id}}</div>
              </div>
            </div>
            <div class="profile-bottom">
              <!--            <div class="task-identifier">-->
              <!--              <div class="task-type">All Men</div>-->
              <!--              <div class="task-status">On/Off</div>-->
              <!--            </div>-->
              <div class="task-date">
                <!--              <div class="task-time">-->
                <!--              </div>-->
                <div class="task-control" v-if="item.autoSendingEnabled !== -1">
                  <img v-if="item.autoSendingEnabled" @click.stop="handleChangeProfileSenderStatus(item)" class="svg-icon height_32px bright" src="@/assets/task_status_active.svg" alt="">
                  <img v-else @click.stop="handleChangeProfileSenderStatus(item)" class="svg-icon height_32px bright" src="@/assets/task_status_paused.svg" alt="">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="sender-content">
      <div class="top" style="padding: 10px">
       <el-form inline label-position="top">
         <el-form-item>
           <el-radio-group v-model="condition.group">
             <el-radio label="all">all</el-radio>
             <el-radio label="online">online</el-radio>
           </el-radio-group>
         </el-form-item>
         <el-form-item>
           <div class="form-box">
             <div class="form-label">VIP</div>
             <el-switch  v-model="condition.vip"></el-switch>
           </div>
         </el-form-item>
         <el-form-item>
           <div class="form-box">
             <div class="form-label">bookmark</div>
             <el-switch  v-model="condition.bookmark"></el-switch>
           </div>
         </el-form-item>
         <el-form-item>
           <div class="form-box">
             <div class="form-label">no answer</div>
             <div style="display: flex;align-items: center;margin-right: 10px">
               <el-input  v-model="condition.no_answer"></el-input>
               <div class="form-unit">
                 mini
               </div>
             </div>
           </div>
         </el-form-item>
         <el-form-item>
           <div class="form-box">
             <div class="form-label">chatting</div>
             <div style="display: flex;align-items: center;margin-right: 10px">
               <el-input  v-model="condition.chatting"></el-input>
               <div class="form-unit">
                 mini
               </div>
             </div>
           </div>
         </el-form-item>
         <el-form-item>
           <div class="form-box">
             <div class="form-label">scan</div>
             <div style="display: flex;align-items: center;margin-right: 10px">
               <el-input  v-model="condition.scan"></el-input>
               <div class="form-unit">
                 scan
               </div>
             </div>
           </div>
         </el-form-item>
         <el-form-item>
           <div class="form-box">
             <div class="form-label">cnt</div>
             <div style="display: flex;align-items: center;margin-right: 10px">
               <el-input  v-model="condition.cnt"></el-input>
               <div class="form-unit">
                 Max
               </div>
             </div>
           </div>
         </el-form-item>
         <el-form-item>
           <div class="form-box">
             <div class="form-label">interval</div>
             <div style="display: flex;align-items: center;margin-right: 10px">
               <el-input  v-model="condition.interval"></el-input>
               <div class="form-unit">
                 hour
               </div>
             </div>
           </div>
         </el-form-item>
       </el-form>
        <div class="btns">

          <el-button @click="handleSaveCondition" type="primary">{{ $t("Save")}}</el-button>
          <el-button @click="handleResetCondition" type="primary">{{ $t("Reset")}}</el-button>
          <el-button @click="handleOpenAddDiaog" icon="el-icon-plus" type="primary">{{ $t("Add")}}</el-button>
        </div>
      </div>
      <div class="bottom">
        <el-table :data="taskList">
          <el-table-column label="No" width="55" type="index">
          </el-table-column>
          <el-table-column label="" width="40">
            <template slot-scope="scope">
              <div class="online" v-if="scope.row.activeTasks">
              </div>
            </template>
          </el-table-column>

          <el-table-column :label="$t('Invites')" >
            <template slot-scope="scope">
              {{ scope.row.message.text}}
            </template>
          </el-table-column>
          <el-table-column prop="files" :label="$t('Files')">
            <template slot-scope="scope">
              <div class="files active" @click="handleOpenFileDialog(scope.row)">
                <img class="svg-icon height_16px" src="@/assets/attachments_sender.svg" alt="">
                {{ scope.row.mediaFiles.length }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="sent" :label="$t('Sent')">
            <template slot-scope="scope">
              <div class="files active">
                {{ scope.row.total || 0 }}
              </div>
            </template>
          </el-table-column>

          <el-table-column label="" width="50">
            <template slot-scope="scope">
              <i style="cursor:pointer;" class="el-icon-delete" @click="handleDeleteTask(scope.row.id)"></i>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <el-dialog
        top="10vh"
        :visible.sync="addSenderDialog"
        width="65vw">
      <div class="sender-task-dialog">
        <div class="sender-task-form">
          <div class="sender-task-form-header">
            <div class="sender-task-form-label">
              {{ $t('Create') }}
            </div>
          </div>
          <div class="sender-task-form-input">
            <el-input type="textarea" :rows="10" v-model="addSenderForm.message"></el-input>
          </div>
        </div>
        <div class="sender-task-bottom">
          <el-button type="primary" @click="handleSaveAdd(true)">
            {{ $t('Save & Run') }}
          </el-button>
          <el-button type="primary" @click="handleSaveAdd(false)">
            {{ $t('Save') }}
          </el-button>
        </div>
      </div>
    </el-dialog>

    <el-dialog
        top="10vh"
        class="file-dialog"
        :visible.sync="fileDialog"
        width="70%">
      <div class="dialog-header">
        <div class="dialog-header-left">
          <div class="profile-info">
            <img :src="checkedProfile.photo" alt="">
            <div class="profile-name">{{ checkedProfile.name }}</div>
          </div>
          <div class="profile-name">Media Gallery</div>
        </div>
        <div class="dialog-header-right">
          <div class="dialog-send-btn" @click="handleAttachedFile">
            Attached {{ checkedFileNum }}
          </div>
        </div>
      </div>
      <el-tabs class="file-tab" v-model="fileTabActive">
        <el-tab-pane label="" name="Photo">
          <span slot="label" class="file-tab-pane">
            <img class="svg-icon height_17px" src="~@/assets/image_tab.svg" alt="">
            <span class="file-tab-name">{{$t('Photo')}} {{ fileList.photo.length}}</span>
          </span>
          <div class="file-tab-content photo">
            <div :class="['file-media-item', item.checked ? 'checked' : '']" v-for="(item,index) in fileList.photo" :key="item.id">
              <el-image
                  fit="cover"
                  style="border-radius: min(calc(12 / 14 * 1rem),0.625vw)"
                  @click="handleCheckedImage('photo', item)"
                  :src="item.urlThumbnail">
              </el-image>
              <div class="preview-btn" @click="openViewer(index)">
                {{ $t("preview") }}
              </div>
              <img src="~@/assets/selected_media.svg" alt="" class="svg-icon height_30px selected-media">
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="" name="Video">
          <span slot="label" class="file-tab-pane">
            <img class="svg-icon height_17px" src="~@/assets/image_tab.svg" alt="">
            <span class="file-tab-name">{{$t('Video')}} {{ fileList.video.length }}</span>
          </span>
          <div class="file-tab-content video">
            <div :class="['file-media-item', item.checked ? 'checked' : '']" v-for="(item,index) in fileList.video" :key="item.id">
              <el-image
                  fit="cover"
                  style="border-radius: min(calc(12 / 14 * 1rem),0.625vw)"
                  @click="handleCheckedImage('video', item)"
                  :src="item.urlThumbnail">
              </el-image>
              <img src="~@/assets/selected_media.svg" alt="" class="svg-icon height_30px selected-media">
              <img @click="openVideo(index)" src="~@/assets/play.svg" alt="" class="svg-icon height_32px video_play">
            </div>
          </div>
        </el-tab-pane>

      </el-tabs>
    </el-dialog>
    <image-viewer :z-index="999999" v-if="showViewer" :on-close="closeViewer" :url-list="previewSrcList"/>
    <el-dialog
        top="10vh"
        class="video-play-dialog"
        :visible.sync="showVideoPlay"
        width="70%">
      <div style="width: 100%;height: 75vh">
        <video :src="previewVideoSrc" controls="controls" autoplay="autoplay" width="100%" height="100%" style="outline: none;"></video>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import {defineComponent} from 'vue'
import ImageViewer from 'element-ui/packages/image/src/image-viewer.vue'

export default defineComponent({
  name: "index",
  components: {
    ImageViewer
  },
  data() {
    return {
      isCheckedAll: false,
      checkboxIcon: require('@/assets/checkbox_unchecked.svg'),
      checkEdboxIcon: require('@/assets/checkbox_checked.svg'),
      condition: {
         // 以下数据处理成key：value
        "group": "all",
        "vip": true,
        "bookmark": true,
        "no_answer": 0,
        "chatting": 0,
        "scan": 0,
        "interval": 0,
        "cnt": 0
      },
      searchParams: {
        inputValue: ''
      },
      activeTab: 'Chat',
      profileList: [],
      checkedProfile: {},
      taskList: [],
      addSenderDialog: false,
      addSenderForm: {
        message: '',
      },
      currentTask: {},
      fileDialog: false,
      fileTabActive: 'Photo',
      fileList: {
        photo: [],
        video: []
      },
      showViewer: false,
      initalIndex: 0,
      previewSrcList: [],
      showVideoPlay: false,
      previewVideoSrc: '',
    }
  },
  computed: {
    profileShowList() {
      return this.profileList.filter(item => {
        return item.name && item.name.includes(this.searchParams.inputValue)
      })
    },
    checkedFile() {
      // 优化 选中的文件数量
      const keys = ['photo', 'video']
      return this.getCheckedFileList(keys)
    },
    checkedFileNum() {
      return this.checkedFile.length
    },
  },
  mounted() {
    this.getProfileList()
  },
  methods: {
    // 获取配置
    getProfileList() {
      this.$http.getProfileList().then(res => {
        this.$http.getUserSender().then(res2 => {
          res.forEach(el => {
            el.autoSendingEnabled = -1
            el.condition = {
              "bookmark": true,
              "chatting": 2,
              "cnt": 2,
              "group": "all",
              "interval": 2,
              "no_answer": 2,
              "scan": 30,
              "vip": true
            }
            if (res2[el.profile_id]) {
              el.condition = res2[el.profile_id]
            }
          })
          this.profileList = res.map(el => {
            return {
              ...el,
              checked: false
            }
          })
        })
      })
      // this.$http.getTask(this.activeTab).then(res => {
      // })
    },
    // 改变状态
    handleChangeProfileSenderStatus(item) {
      this.$http.updateProfileSender(item.autoSendingEnabled ? 'disable' : 'enable',{
        profiles: [item.profile_id]
      }).then(res => {
        this.profileList.forEach(el => {
          if (el.profile_id === this.checkedProfile.profile_id) {
            el.autoSendingEnabled = !el.autoSendingEnabled
          }
        })
        console.log(this.profileList)
      })
    },
    // 删除任务
    handleDeleteTask(id) {
      this.$confirm(this.$t('Are you sure to delete this task?'), '', {
        confirmButtonText: this.$t('Confirm'),
        cancelButtonText: this.$t('Cancel'),
      }).then(() => {
        this.$http.deleteProfileSender({
          taskId: id
        }).then(res => {
          this.$message.success(this.$t('Success'))
          this.getProfileTaskList()
        })
      }).catch(() => {
      })

    },
    // 选中type
    handleChangeTab(id) {
      this.activeTab = id
    },
    // 选中表头checkbox
    handleCheckProfileAll() {
      this.isCheckedAll = !this.isCheckedAll
      this.profileList.forEach(item => item.checked = this.isCheckedAll)
    },
    // 选中列表checkbox
    handleCheckProfile(item) {
      item.checked = !item.checked
      // 更新isCheckedAll状态
      this.isCheckedAll = this.profileList.every(item => item.checked)
    },
    // 列表下拉操作 开启/关闭
    handleProfileCommand(item) {
      const ids = this.profileList.filter(e => e.checked).map(e => e.profile_id)
      this.$http.updateProfileSender(item === 'on' ? 'enable' : 'disable',{
        profiles: ids
      }).then(res => {
        this.profileList.forEach(el => {
          // profile_id 存在改变状态
          if (ids.includes(el.profile_id)) {
            el.autoSendingEnabled = item === 'on'
          }
        })
      })
    },
    handleCheckedProfile(item) {
      this.checkedProfile = item
      this.getProfileTaskList()
    },
    // 获取任务列表
    getProfileTaskList() {
      this.$http.getProfileTask({
        profileId: this.checkedProfile.profile_id,
        taskType: this.activeTab + '_ALL_MEN'
      }).then(res => {
        res.activeTasks.forEach(item => {
          this.profileList.forEach(el => {
            if (el.profile_id === this.checkedProfile.profile_id) {
              if (item.activeStatus === 'PAUSED') {
                el.autoSendingEnabled = false
              } else {
                el.autoSendingEnabled = true
              }
            }
          })
        })
        this.taskList = [
          ...res.activeTasks.map(el => {
            return {
              ...el,
              activeTasks: true
            }
          }),
          ...res.completedTask.map(el => {
            return {
              ...el,
              activeTasks: false
            }
          }),
          ...res.scheduledTasks.map(el => {
            return {
              ...el,
              activeTasks: false
            }
          })
        ]
        if(this.taskList.length) {
          for (const conditionKey in this.condition) {
            this.condition[conditionKey] = this.taskList[0][conditionKey]
          }
        }
      })
    },
    // 保存条件
    handleSaveCondition() {
      this.$http.updateProfileSenderCondition({
        profiles: [this.checkedProfile.profile_id],
        ...this.condition
      }).then(res => {
        this.$message.success('Success')
      })
    },
    // 重制条件
    handleResetCondition() {
      this.condition = {
        "group": "all",
        "vip": true,
        "bookmark": true,
        "no_answer": 0,
        "chatting": 0,
        "scan": 0,
        "interval": 0,
        "cnt": 0
      }
    },
    // 新增
    handleOpenAddDiaog() {
      this.addSenderDialog = true
    },
    // 保存
    handleSaveAdd(saveAndRun) {
      this.$http.addProfileSender({
        saveAndRun,
        tasks: [
          {
            profileId: this.checkedProfile.profile_id,
            messages: [
              {
                text: this.addSenderForm.message,
              }
            ]
          }
        ]
      }).then(res => {
        this.addSenderDialog = false
        this.getProfileTaskList()
      })

    },
    //
    handleOpenFileDialog(item) {
      console.log(item)
      this.currentTask = item
      this.fileDialog = true
      this.$http.getProfileMedia({
        profileId: this.checkedProfile.profile_id,
        customerId: this.customerId,
        mediaType: this.enumType.PHOTO,
        cursor: "",
        includeModerated: false,
        viewMediaContext: "DIALOG",
      }).then(res => {
        this.fileList.photo = res.media.map(el => {
          return {
            ...el,
            checked: (item.mediaFiles || []).find(m => m.id === el.id)
          }
        })
      })
      this.$http.getProfileMedia({
        profileId: this.checkedProfile.profile_id,
        customerId: this.customerId,
        mediaType: this.enumType.VIDEO,
        cursor: "",
        includeModerated: false,
        viewMediaContext: "DIALOG",
      }).then(res => {
        this.fileList.video = res.media.map(el => {
          return {
            ...el,
            checked: (item.mediaFiles || []).find(m => m.id === el.id)
          }
        })
      })
    },
    getCheckedFileList(keys, fileList = this.fileList) {
      let list = []
      keys.forEach(key => {
        list = [...list, ...fileList[key].filter(el => el.checked)]
      })
      return list
    },
    openViewerForMailContent(index, item) {
      this.initalIndex = index
      this.previewSrcList = item.attachments.images.map(el => el.url)
      this.showViewer = true
    },
    openViewer(index) {
      this.initalIndex = index
      this.previewSrcList = this.fileList[this.fileTabActive.toLowerCase()].map(el => el.url)
      this.showViewer = true
    },
    closeViewer() {
      this.showViewer = false
    },
    handleCheckedImage(key, item) {
      item.checked = !item.checked
    },
    openVideo(item) {
      this.previewVideoSrc = item.url
      this.showVideoPlay = true
    },
    handleAttachedFile() {
      this.$http.addProfileSenderMedia({
        taskId: this.currentTask.id,
        mediaFiles: this.checkedFile
      }).then(res => {
        this.$message.success(this.$t('Success'))
        this.fileDialog = false
        this.getProfileTaskList()
      })
    }
  }
})
</script>


<style lang="scss">
.sender {
  position: relative;
  display: grid;
  grid-template-columns: max(min(calc(400 / 14 * 1rem),calc(400 / (1920 / 100) * 1vw)),300px) auto;
  grid-gap: 1rem;
  height: calc(100vh - min(4rem,2.917vw));
  padding: 0.571rem 0 1.786rem;
  background: #0E222E;
  .sender-task-dialog {
    display: flex;
    flex-direction: column;
    gap: 1.714rem;
    width: 100%;
    height: 100%;
    .sender-task-form {
      display: flex;
      flex-direction: column;
      gap: min(calc(24 / 14 * 1rem),calc(24 / (900 / 100) * 1vh));
      align-items: flex-start;
      width: 100%;
      padding: 1.714rem;
      border-radius: 1rem;
      background: #0E222E;
      font-family: Inter,sans-serif;
      .sender-task-form-header {
        width: 100%;
        display: flex;
        align-items: center;
        .sender-task-form-label {
          color: #ffffff;
          font-size: 1.429rem;
          font-weight: 700;
        }
        .required {
          margin-left: auto;
          color: #fc9ab6;
          font-size: .857rem;
          line-height: 100%;
        }
      }
      .sender-task-form-input {
        width: 100%;
        .el-textarea__inner,
        .el-input__inner {
          width: 100%;
          border: none;
          border-radius: 0.286rem;
          background: #233645;
          color: #ebebeb;
          font-size: .857rem;
          font-weight: 600;
          text-indent: 1.143rem;
        }
      }
    }
    .sender-task-bottom {
      display: flex;
      gap: 1.214rem;
      .el-button {
        flex: 1
      }
    }
  }
  .file-dialog {

    .el-dialog {
      .dialog-header {
        display: flex;
        justify-content: space-between;
        .dialog-send-btn {
          display: flex;
          align-items: center;
          justify-content: center;
          height: min(calc(48 / 14 * 1rem),calc(48 / (900 / 100) * 1vh));
          cursor: pointer;
          border-radius: min(calc(8 / 14 * 1rem),calc(8 / (1920 / 100) * 1vw));
          outline: 1px solid #3C6382;
          letter-spacing: .01rem;
          width: min(calc(121 / 14 * 1rem),calc(121 / (1920 / 100) * 1vw));
          background-color: #2c5361;
          &:hover {
            background-color: #2c485f;
            transition-duration: .3s;
          }
        }
        .dialog-header-right {
          display: flex;
          align-items: center;
          gap: min(calc(8 / 14 * 1rem),calc(8 / (1920 / 100) * 1vw));
          .box {
            display: flex;
            align-items: center;
            justify-content: center;
            width: min(calc(48 / 14 * 1rem),calc(48 / (900 / 100) * 1vh));
            height: min(calc(48 / 14 * 1rem),calc(48 / (900 / 100) * 1vh));
            cursor: pointer;
            border-radius: 0.571rem;
            background-color: #122a3a;
            outline: 1px solid #2B4353;
            color: #d5d5d5;
            font-family: Inter,sans-serif;
            font-size: min(1.286rem, 0.938vw);
            &:hover {
              background-color: #2c485f;
              transition-duration: .3s;
            }
          }
        }
        .dialog-header-left {
          display: flex;
          gap: min(calc(48 / 14 * 1rem),2.5vw);
          align-items: center;
          height: min(calc(48 / 14 * 1rem),calc(48 / (900 / 100) * 1vh));
        }
        .profile-info {
          display: flex;
          gap: min(calc(13 / 14 * 1rem),calc(13 / (1920 / 100) * 1vw));
          align-items: center;
          letter-spacing: .01em;
          img {
            width: min(2.5rem,calc(35 / (1920 / 100) * 1vw));
            height: min(2.5rem,calc(35 / (1920 / 100) * 1vw));
            border-radius: min(calc(8 / 14 * 1rem),calc(8 / (1920 / 100) * 1vw));
          }
        }
        .profile-name {
          color: #f1f1f1;
          max-width: min(calc(300 / 14 * 1rem),15.625vw);
          overflow: hidden;
          font-size: min(calc(12 / 14 * 1rem),calc(12 / (900 / 100) * 1vh));
          font-weight: 700;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

      }
    }
    .file-tab {
      .file-tab-content {
        height: 65vh;
        overflow-y: auto;
        padding-right: min(1rem,calc(14 / (1920 / 100) * 1vw));
        display: grid;
        grid-gap: min(calc(6 / 14 * 1rem),0.3125vw);
        align-content: flex-start;
        justify-content: space-between;
        grid-template-columns: repeat(auto-fill,min(calc(90 / 14 * 1rem),4.6875vw));
        width: 100%;
        overflow: initial;
        overflow: auto;
        .file-media-item {
          position: relative;
          display: flex;
          width: min(calc(90 / 14 * 1rem),4.6875vw);
          cursor: pointer;
          border-radius: min(calc(12 / 14 * 1rem),0.625vw);
          aspect-ratio: 2/3;
          .preview-btn {
            display: none;
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: min(calc(22 / 14 * 1rem),calc(22 / (1920 / 100) * 1vw));
            cursor: pointer;
            border-radius: min(calc(4 / 14 * 1rem),calc(4 / (1920 / 100) * 1vw)) min(calc(4 / 14 * 1rem),calc(4 / (1920 / 100) * 1vw)) min(calc(8 / 14 * 1rem),calc(8 / (1920 / 100) * 1vw)) min(calc(8 / 14 * 1rem),calc(8 / (1920 / 100) * 1vw));
            color: #67cae8;
            font-size: min(calc(12 / 14 * 1rem),.625vw);
            font-weight: 600;
            letter-spacing: .01rem;
            text-align: center;
            line-height: min(calc(22 / 14 * 1rem),calc(22 / (1920 / 100) * 1vw));
            background: rgba(14,34,46,.88);
          }
          .selected-media {
            position: absolute;
            top: 0;
            right: -5%;
            display: none;
          }
          .video_play {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
          }
          &:hover {
            .preview-btn {
              display: block;
              transition: .2s ease-in-out;
            }
          }
          &.checked {
            .el-image {
              opacity: .3;
            }
            .selected-media {
              display: initial;
            }
          }
        }
      }
      .file-tab-content.sent {
        display: flex;
        flex-direction: column;
        gap: min(calc(16 / 14 * 1rem),calc(16 / (900 / 100) * 1vh));
        padding-right: min(1rem,calc(14 / (1920 / 100) * 1vw));
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-gutter: stable;
        justify-content: initial;
        .mediaType {
          color: #f1f1f1;
          font-size: min(calc(16 / 14 * 1rem),calc(16 / (900 / 100) * 1vh));
          letter-spacing: .01rem;
        }
      }
      .el-tabs__nav-wrap::after {
        background-color: #314F67;

      }
      .el-tabs__active-bar {
        background-color: #94f4ff;
      }
      .file-tab-pane {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        white-space: nowrap;
        img {
          height: min(calc(17 / 14 * 1rem),calc(17 / (900 / 100) * 1vh));
        }
        .file-tab-name {
          margin-left: 0.8rem;
          color: #d5d5d5;
          font-family: Manrope,sans-serif;
          font-size: 1rem;
          font-weight: 400;
          font-style: normal;
          line-height: 150%;
        }
      }
    }
  }

  .online {
    width: 15px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: inset 0 0.286rem 0.286rem #000;
  }
  .sender-content {
    display: flex;
    flex-direction: column;
    gap: 0.286rem;
    height: calc(100vh - 4rem - 0.571rem - 1.786rem);
    .top {
      position: relative;
      display: flex;
      gap: 2rem;
      align-items: center;
      justify-content: space-between;
      padding: 0.286rem 1.143rem 0.286rem 0.286rem;
      border-radius: 0.857rem;
      background-color: #122a3a;
      font-family: Inter,sans-serif;
      .btns {
        flex-shrink: 0;
      }
      .el-form-item {
        border-right: 1px solid #244650;
        padding: 0 10px;
        .el-form-item__content {
          height: 60px;
        }
        .form-box {
          height: 100%;
          display: flex;flex-direction: column;
          justify-content: space-between;
          .el-input {
            width: 60px;
            .el-input__inner {
              border-color: #0E222E;
              background: #0E222E;
            }
          }
          .form-unit {
            color: #67cae8;
            margin-left: 10px;
          }
        }
        .form-label {
          font-size: 14px;
          line-height: 14px;
          color: #fff;
        }
      }
      .el-radio {
        color: #ffffff;
      }
      .el-radio-group {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .el-radio {
          margin-bottom: 10px;
          &:last-child {
            margin-bottom: 0;
          }
        }
      }
      .condition {
        display: flex;
        gap: min(calc(10 / 14 * 1rem),calc(10 / (1920 / 100) * 1vw));
        align-items: center;
        padding: 0.286rem;
      }
    }
    .bottom {
      .files {
        cursor: pointer;
        opacity: .3;
        filter: brightness(.7);
        display: flex;
        gap: 0.143rem;
        align-items: center;
        justify-content: center;
        padding: 0.429rem 0.714rem;
        border-radius: 0.571rem;
        background-color: #15384f;
        color: #64aacd;
        font-size: min(calc(16 / 14 * 1rem),calc(16 / (1920 / 100) * 1vw));
      }
      .files.active {
        opacity: 1;
        background-color: #152d3d;
      }
    }

  }
  .profile-box {
    display: flex;
    flex-direction: column;
    height: 100%;
    .header {
      padding: 0.571rem;
      border-radius: 1.143rem 1.143rem 0 0;
      background-color: #122a3a;
      margin-bottom: 0.286rem;
      display: flex;
      align-items: center;
      .tab-list {
        display: flex;
        gap: 0.286rem;
        align-items: center;
        justify-content: space-evenly;
        padding: 0.286rem;
        border-radius: 0.571rem;
        background-color: #0e222e;
        .tab {
          display: flex;
          flex-grow: 1;
          gap: 1rem;
          align-items: center;
          justify-content: center;
          padding: 0 0.286rem;
          cursor: pointer;
          opacity: .2;
          border-radius: 0.286rem;
          font-size: .857rem;
          color: #fff;
          &.active {
            opacity: 1;
            background: #173447;
          }
        }
      }
    }
    .checkbox-background{
      flex-shrink: 0;
      border-radius: 0.571rem 0 0 0.571rem;
      background: #0E222E;
      margin-right: 0.286rem;
      height: 100%;
      width: 2.5rem;
      .checkbox-cell {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.5rem;
        padding: 0.186rem;
        height: 100%;
        .checkbox {
          width: 2.5rem;
          cursor: pointer;
        }
      }
    }
    .profile-list {
      flex: 1 0 auto;
      padding: 0.571rem;
      overflow: auto;
      border-radius: 0 0 1.143rem 1.143rem;
      background-color: #122a3a;
      .profile-item-wrapper {
        display: flex;
        align-items: center;
        margin-bottom: 5px;
      }
      .profile-item {
        display: flex;
        flex: 0 1 100%;
        align-items: flex-start;
        justify-content: space-between;
        padding: 0.5rem;
        border-radius: 0.571rem;
        background: #0E222E;
        flex-direction: column;
        gap: 0.286rem;
        border: 1px solid transparent;
        &:hover {
          background-color: #2b4353;
          .profile-item-name {
            color: #80d1f4;
          }
        }
        &.active {
          border: 1px solid #94F4FF;
        }
        .profile-top {
          display: flex;
          gap: 0.286rem;
          align-items: center;
          width: 100%;
          min-height: 4rem;
          padding: 0.571rem 1.143rem 0.571rem 0.571rem;
          cursor: pointer;
          border-radius: 0.571rem;
          color: #dfdfdf;
          font-size: min(calc(13 / 14 * 1rem),calc(13 / (1920 / 100) * 1vw));
          .photo {
            width: min(3.42857rem, 2.5vw);
            height: min(3.42857rem, 2.5vw);
            border-radius: min(calc(8 / 14 * 1rem),calc(8 / (1920 / 100) * 1vw));
            object-fit: cover;
          }

          .profile-item-avatar {
            position: relative;
            .profile-status {
              position: absolute;
              right: 0;
              bottom: 1px;
              width: 1rem;
              height: 1rem;
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 50%;
              background: #0E222E;
              box-shadow: inset 0 0.286rem 0.286rem #000;
            }
          }
        }

        .profile-bottom {
          width: 100%;
          display: flex;
          align-items: center;
          color: #94b5cf;
          font-size: .875rem;
          opacity: .6;
          .task-identifier {
            display: grid;
            grid-template-columns: 2fr 1fr;
            width: 50%;
            padding: 0.714rem 0.571rem;
            border-radius: 0.571rem;
            background-color: #112939;
            font-family: Manrope,sans-serif;
            .task-type {
              opacity: .56;
              color: #6ed1ff;
              font-size: 1rem;
            }
            .task-status {
              opacity: 1;
              color: #6ed1ff;
              font-size: 1rem;
            }
          }
          .task-date {
            margin-left: auto;
            display: flex;
            gap: 0.286rem;
            justify-content: flex-end;
            width: 45%;
            .task-time {
              display: flex;
              justify-content: center;
              padding: min(calc(10 / 14 * 1rem),calc(10 / (900 / 100) * 1vh)) min(calc(8 / 14 * 1rem),calc(8 / (1920 / 100) * 1vw));
              border-radius: 0.571rem;
              background-color: #112939;
            }
            .task-control {
              display: flex;
              align-items: center;
              justify-content: center;
              opacity: .56;
              color: #6ed1ff;
            }
          }
        }
      }
    }
    .search {
      display: flex;
      align-items: center;
      padding: 0 1.786rem 0 0.75rem;
      border-radius: 0.571rem;
      background-color: #0E222E;
      .el-input__inner {
        border: none;
        &:focus {
          border: none;
        }
      }
    }
  }
}
</style>
